<template>
  <div class="post-list">
    <h2>所有帖子</h2>

    <div v-if="posts && posts.length > 0" class="posts-container">
      <PostItem
          v-for="post in posts"
          :key="post.id"
          :post="post"
          @toggle-like="$emit('toggleLike', post.id)"
          @add-comment="(comment) => $emit('addComment', post.id, comment)"
      />
    </div>

    <div v-else class="no-posts">
      还没有帖子，快来发布第一个吧！
    </div>

  </div>
</template>

<script setup>
import PostItem from './PostItem.vue';
import { defineProps, defineEmits } from 'vue';

defineProps({
  posts: {
    type: Array,
    required: true,
    // 推荐：为 props 提供一个默认值，增加组件的健壮性
    default: () => []
  },
});

defineEmits(['toggleLike', 'addComment']);
</script>

<style scoped>
.post-list {
  margin-top: 20px;
}

.post-list h2 {
  text-align: center;
  color: #555;
  margin-bottom: 25px;
}

.no-posts {
  text-align: center;
  color: #777;
  padding: 30px;
  background-color: #f0f0f0;
  border-radius: 8px;
  margin-top: 20px;
}
</style>